import React, {useState} from "react";
import {useHistory} from "react-router-dom";
import PropTypes from "prop-types";
import CustomIcon from "../CustomIcon";

import {TabBar} from "zarm";

import s from "./index.module.scss";



const TabBarItem = TabBar.Item;
const NavBarData = [
    {
        path: '/',
        name: '账单',
        icon: 'zhangdan'
    },
    {
        path: '/data',
        name: '统计',
        icon: 'tongji'
    },
    {
        path: '/user',
        name: '我的',
        icon: 'wode'
    }
];

const NavBar = ({showNav}) => {
    const [activeKey, setActiveKey] = useState('/');
    const history = useHistory();

    const changeTab = path => {
        setActiveKey(path);
        history.push(path)
    };
    return (
        <TabBar
            visible={showNav}
            className={s.tab}
            activeKey={activeKey}
            onChange={changeTab}
        >
            {NavBarData.map(({path, name, icon}) =>
                <TabBarItem itemKey={path} title={name} icon={<CustomIcon type={icon}/>}/>
            )}
        </TabBar>
    )
};

NavBar.propTypes = {
    showNav: PropTypes.bool
}
export default NavBar;